// Detect lightness
@function detectLightness($color) {
  @if (lightness($color) > 60) {
    @return mix($color, #000, 90%);
  } @else {
    @return mix($color, $white, 90%);
  }
}

// Spacing
@function spacing($type) {
  @if $type == 'compact' {
    @return 12px;
  }
  @if $type == 'spacious' {
    @return 22px;
  } @else {
    @return 16px;
  }
}

// Description
@function desc($display) {
  @if $display == false {
    @return none;
  } @else {
    @return block;
  }
}

// Layout type
@mixin layout-type($type) {
  @if $type == 'small' {
    max-width: 500px;
    min-width: 400px;
  }
  @if $type == 'normal' {
    max-width: 600px;
    min-width: 500px;
  }
  @if $type == 'large' {
    max-width: 800px;
    min-width: 600px;
  }
  @if $type == 'full' {
    width: 100%;
  }
}

// Alignement type
@mixin alignment-type($type) {
  @if $type == 'left' {
    left: 0 !important;
    right: inherit !important;
  }
  @if $type == 'right' {
    right: 0 !important;
    left: inherit !important;
  }
  @if $type == 'center' {
    left: 0 !important;
    right: 0 !important;
    margin: auto !important;
  }
}

// Mixin - Shadow type
@mixin shadow-type($type) {
  @if $type == 'light' {
    box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2), 0 2px 3px 0 rgba(0, 0, 0, 0.1);
  }
  @if $type == 'heavy' {
    box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }
}

@mixin dropdown(
  $main-color: #458EE1,
  $layout-type: normal,
  $layout-alignment: right,
  $layout-width: 800,
  $background-color: $white,
  $border-radius: 4,
  $border-width: 1,
  $border-color: #D9D9D9,
  $box-shadow: light,
  $branding-position: bottom,
  $font-size: normal,
  $header-color: #33363D ,
  $title-color: #02060C,
  $subtitle-color: #A4A7AE,
  $text-color: #63676D,
  $highlight-color: #3881FF,
  $spacing: normal,
  $include-desc: true,
  $background-category-header:  $white
){

  $padding: spacing($spacing);

  $header-size: 1em;
  $title-size: .9em;
  $text-size: .85em;
  $subtitle-size: .9em;

  @if $font-size == 'small' {
    $header-size: .95em;
    $title-size: .8em;
    $text-size: .75em;
    $subtitle-size: .8em;
  } @else if $font-size == 'large' {
    $header-size: 1.1em;
    $title-size: 1em;
    $text-size: .9em;
    $subtitle-size: 1em;
  }

  .algolia-autocomplete {
    display: block;
    width: 100%;
    height: 100%;
  }

  // powered by
  .algolia-docsearch-footer {
    width: 100px;
    height: 20px;
    z-index: 2000;
    margin-top: $padding/2;
    float: right;
    font-size: 0;
    line-height: 0;

    &--logo {
      background-image: url('data:image/svg+xml;utf8,<svg width="86" height="13" viewBox="0 0 86 13" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M5.01 8.1c0 .63-.228 1.12-.684 1.47-.456.352-1.074.528-1.855.528-.84 0-1.49-.11-1.95-.327v-.8c.3.13.61.22.96.3.35.07.69.11 1.03.11.56 0 .97-.1 1.25-.31s.42-.5.42-.87c0-.25-.05-.45-.15-.61-.09-.15-.26-.3-.49-.43-.24-.14-.59-.29-1.07-.46-.66-.23-1.13-.52-1.42-.84C.76 5.52.61 5.1.61 4.57c0-.55.21-.985.62-1.31.42-.325.96-.488 1.64-.488.71 0 1.37.13 1.96.39l-.26.72c-.59-.25-1.16-.37-1.71-.37-.44 0-.78.09-1.03.28-.25.19-.37.45-.37.78 0 .24.05.45.14.6.09.16.246.3.46.43.22.13.55.277.996.437.75.26 1.264.55 1.545.86.29.3.43.7.43 1.19zm3.598 2c-.79 0-1.415-.24-1.872-.723-.458-.482-.686-1.15-.686-2.007 0-.862.212-1.548.637-2.056.425-.507.995-.76 1.71-.76.672 0 1.203.22 1.593.66.39.44.586 1.023.586 1.746v.513H6.89c.016.63.175 1.106.476 1.43.3.327.725.49 1.272.49.576 0 1.146-.12 1.71-.362v.73c-.288.13-.56.22-.814.27-.256.06-.564.08-.926.08zm-.22-4.87c-.43 0-.772.14-1.027.42-.25.28-.4.67-.45 1.164h2.8c0-.512-.11-.903-.34-1.175-.23-.28-.55-.41-.97-.41zM15.25 10l-.16-.762h-.04c-.266.336-.532.563-.798.68-.265.12-.596.18-.993.18-.53 0-.95-.137-1.25-.41-.3-.274-.45-.663-.45-1.167 0-1.08.86-1.64 2.59-1.7l.91-.02v-.34c0-.42-.09-.73-.27-.93-.18-.2-.47-.3-.87-.3-.45 0-.95.14-1.52.41l-.25-.62c.26-.14.55-.25.86-.33.31-.08.63-.12.94-.12.63 0 1.11.15 1.41.43.3.29.46.74.46 1.37V10h-.6zm-1.83-.57c.505 0 .9-.14 1.19-.416.287-.277.43-.664.43-1.162v-.484l-.81.034c-.644.023-1.11.123-1.394.3-.284.178-.427.454-.427.828 0 .293.09.516.26.67.18.152.42.23.74.23zm6.543-4.88c.24 0 .452.02.64.06l-.112.75c-.22-.048-.41-.072-.58-.072-.43 0-.8.176-1.11.527-.31.352-.46.79-.46 1.314V10h-.81V4.648h.67l.1.992h.04c.2-.35.44-.617.72-.806.28-.19.59-.283.93-.283zm3.58 5.548c-.775 0-1.374-.24-1.8-.716-.424-.477-.636-1.15-.636-2.024 0-.895.215-1.587.646-2.075.432-.488 1.046-.732 1.844-.732.257 0 .514.03.77.09.258.06.46.12.607.2l-.248.69c-.18-.07-.375-.13-.586-.18-.212-.04-.4-.07-.562-.07-1.087 0-1.63.7-1.63 2.08 0 .66.132 1.16.397 1.52.267.35.66.53 1.18.53.446 0 .904-.09 1.373-.28v.72c-.358.19-.81.28-1.353.28zm6.28-.098V6.538c0-.436-.1-.762-.297-.976-.198-.215-.51-.323-.932-.323-.563 0-.974.15-1.233.45-.25.3-.38.81-.38 1.5V10h-.81V2.402h.81v2.3c0 .277-.01.506-.04.69h.05c.16-.26.39-.46.68-.61.3-.147.63-.22 1.01-.22.66 0 1.15.154 1.47.465.33.31.49.805.49 1.482V10h-.81zm7.565-5.44c.703 0 1.25.24 1.638.72.39.48.583 1.16.583 2.04 0 .878-.2 1.56-.59 2.048-.39.486-.94.73-1.64.73-.35 0-.67-.065-.96-.193-.29-.13-.53-.327-.73-.593h-.06l-.17.688h-.58V2.402h.81v1.846c0 .413-.02.785-.04 1.113h.04c.38-.53.94-.8 1.68-.8zm-.117.68c-.55 0-.95.158-1.19.475-.24.318-.36.852-.36 1.604 0 .75.13 1.29.38 1.61.25.32.66.48 1.21.48.5 0 .87-.19 1.12-.55.25-.37.37-.89.37-1.57 0-.7-.12-1.22-.36-1.56-.24-.35-.62-.52-1.13-.52zm2.71-.592h.87L42.02 7.7c.257.697.416 1.2.48 1.51h.037c.042-.167.13-.45.266-.853.136-.402.578-1.638 1.327-3.71H45l-2.3 6.095c-.23.602-.496 1.03-.8 1.282-.304.252-.678.378-1.12.378-.248 0-.49-.027-.733-.083v-.65c.18.04.38.06.6.06.557 0 .954-.32 1.192-.94l.29-.76-2.16-5.39z" fill="%23797979"/><path d="M70.883 4.8l-.553 2.06 1.782-1.025c-.26-.5-.7-.876-1.23-1.034zM67.76 3.41c-.237-.25-.624-.25-.862 0l-.108.114c-.238.252-.238.66 0 .91l.115.122c.244-.414.556-.78.918-1.08l-.062-.066zm3.73-.63c0-.014.003-.027.003-.042v-.322c0-.355-.273-.644-.61-.644h-1.068c-.337 0-.61.288-.61.644v.317c.34-.1.698-.156 1.068-.156.424 0 .833.072 1.216.203" fill="%2346AEDA"/><path d="M70.316 4.243c1.34 0 2.428 1.145 2.428 2.552 0 1.408-1.09 2.553-2.428 2.553-1.34 0-2.428-1.145-2.428-2.553 0-1.407 1.09-2.552 2.428-2.552m-3.4 2.552c0 1.974 1.522 3.574 3.4 3.574s3.4-1.6 3.4-3.58-1.522-3.58-3.4-3.58-3.4 1.6-3.4 3.57z" fill="%2346AEDA"/><path d="M54.758 10.175c-.14-.39-.27-.776-.395-1.155-.124-.378-.25-.763-.383-1.154H50.1l-.78 2.31h-1.247c.33-.958.64-1.843.927-2.656.288-.813.57-1.585.847-2.316.275-.73.55-1.43.82-2.094.273-.666.557-1.324.854-1.977h1.1c.3.653.58 1.31.86 1.977.27.665.55 1.363.82 2.094.28.73.56 1.503.85 2.316.29.813.6 1.698.93 2.655h-1.31zm-1.124-3.353c-.264-.757-.525-1.49-.785-2.2-.26-.708-.53-1.388-.81-2.04-.29.652-.57 1.332-.83 2.04-.26.71-.52 1.443-.77 2.2h3.19zm5.45 3.483c-.71-.017-1.21-.178-1.508-.482-.297-.305-.445-.78-.445-1.423V.26l1.15-.21v8.155c0 .2.02.365.05.496.04.13.09.24.16.32.08.08.18.14.3.18.13.04.28.08.46.1l-.16 1.02m5.47-.81c-.1.07-.29.16-.57.27-.28.11-.61.17-.99.17s-.75-.06-1.09-.19c-.34-.13-.64-.33-.89-.6-.26-.27-.46-.61-.61-1.02-.15-.4-.22-.89-.22-1.46 0-.49.07-.95.21-1.36.14-.41.35-.77.61-1.07.27-.3.6-.53.99-.7.39-.17.83-.25 1.31-.25.54 0 1.01.04 1.41.12.4.09.73.16 1.01.23V9.7c0 1.044-.25 1.8-.76 2.27s-1.29.705-2.33.705c-.4 0-.78-.035-1.14-.104-.36-.07-.67-.15-.93-.24l.21-1.06c.23.09.51.18.84.25.34.08.68.11 1.05.11.69 0 1.18-.14 1.48-.43.3-.28.45-.74.45-1.37v-.3zm-.47-5.13c-.19-.03-.45-.04-.78-.04-.61 0-1.09.22-1.42.64-.33.43-.5.99-.5 1.7 0 .39.05.73.14 1.01.1.28.23.51.39.69.16.18.35.32.56.41.21.09.43.13.65.13.31 0 .59-.04.84-.13.26-.09.46-.2.61-.32v-4c-.11-.03-.27-.06-.46-.09zm12.77 5.95c-.7-.02-1.21-.18-1.5-.48-.29-.3-.44-.78-.44-1.42V.26l1.15-.21v8.155c0 .2.02.365.05.496.04.13.09.24.16.32.08.08.18.14.3.18.13.04.28.08.46.1l-.16 1.02m2.01-8.14c-.2 0-.38-.07-.52-.21-.14-.14-.21-.34-.21-.58 0-.24.07-.44.22-.58.14-.14.32-.21.52-.21.21 0 .38.08.53.22.15.15.22.34.22.58 0 .25-.07.44-.21.58-.15.15-.32.22-.53.22zm-.57 1.23h1.15v6.79H78.3V3.4zm5.2-.17c.46 0 .85.07 1.17.19.32.13.57.31.77.54.2.23.33.5.42.82.08.32.12.67.12 1.05v4.24l-.41.07c-.17.03-.37.06-.6.09-.22.03-.46.05-.72.08-.26.02-.51.03-.77.03-.36 0-.69-.04-1-.12-.3-.08-.56-.2-.79-.37-.22-.17-.39-.39-.52-.67S81 8.57 81 8.18c0-.37.07-.692.22-.962s.34-.49.59-.653c.25-.164.53-.286.86-.364.33-.08.68-.12 1.04-.12.12 0 .24.01.36.02.13.02.24.03.35.05.12.03.21.04.3.06.083.02.14.03.174.04V5.9c0-.2-.02-.395-.07-.59-.04-.198-.114-.37-.22-.524-.107-.15-.253-.273-.44-.364-.183-.09-.424-.13-.72-.13-.38 0-.71.03-.996.09-.29.055-.5.114-.64.175l-.14-1.007c.147-.07.395-.133.74-.2.346-.064.72-.1 1.125-.1zm.1 6.08c.27 0 .52 0 .73-.02.21-.01.39-.03.53-.07V7.19c-.08-.044-.22-.08-.4-.11-.18-.03-.41-.047-.67-.047-.17 0-.36.02-.55.04-.19.03-.37.08-.53.17-.16.085-.29.198-.4.34-.11.145-.16.33-.16.57 0 .435.13.737.39.906.26.17.62.25 1.07.25z" fill="%231D3657"/></g></svg>');
      background-repeat: no-repeat;
      background-position: center;
      background-size: 100%;
      overflow: hidden;
      text-indent: -9000px;
      padding: 0 !important;
      width: 100%;
      height: 100%;
      display: block;
    }
  }


  // Dropdown wrapper
  .aa-dropdown-menu {
    position: relative;
    top: -6px;
    border-radius: $border-radius+px;
    margin: 6px 0 0;
    padding: 0;
    text-align: left;
    height: auto;
    background: transparent;
    border: 0;
    @include layout-type($layout-type);
    @include alignment-type($layout-alignment);
    @include shadow-type($box-shadow);

    // Arrow
    &::before {
      position: absolute;
      content: '';
      width: 14px;
      height: 14px;
      background: $background-color;
      top: -7px;
      border-top: $border-width+px solid $border-color;
      border-right: $border-width+px solid $border-color;
      transform: rotate(-45deg);
      border-radius: 2px;
      z-index: 999;
      @if $layout-alignment == 'center' {
        display: none;
      } @else {
        display: block;
        #{$layout-alignment}: 48px;
      }
    }

    .aa-suggestions {
      position: relative;
      z-index: 1000;
    }

    [class^="aa-dataset-"] {
      position: relative;
      border: solid $border-width+px $border-color;
      background: $background-color;
      border-radius: $border-radius+px;
      overflow: auto;
      padding: 0 $padding $padding/2;
    }

    // Inner-grid setup
    * {
      box-sizing: border-box;
    }
  }

  // Each suggestion item is wrapped
  .algolia-docsearch-suggestion {
    position: relative;
    padding: 0;
    background: $background-color;
    color: $title-color;
    overflow: hidden;

    &--highlight {
      color: darken($main-color, 10%);
      background-color: rgba($main-color, .08);

      .algolia-docsearch-suggestion--category-header & {
        background: inherit;
      }
    }

    &--content {
      display: block;
      float: right;
      width: 70%;
      position: relative;
      padding: $padding/3 0 $padding/3 $padding/1.5;
      cursor: pointer;

      .aa-cursor & {
        background: rgba(black, .03);
      }

      &::before {
        content: '';
        position: absolute;
        display: block;
        top: 0;
        height: 100%;
        width: 1px;
        background: #DDD;
        left: -1px;
      }
    }

    &--category-header {
      position: relative;
      border-bottom: 1px solid #DDD;
      display: none;
      padding: $padding/4 0;
      font-size: $header-size;
      color: $header-color;

      .algolia-docsearch-suggestion__main & {
        display: block;
        margin-top: $padding;
      }
    }

    &--wrapper {
      width: 100%;
      float: left;
      padding: $padding/2 0 0 0;
    }

    &--subcategory-column {
      float: left;
      width: 30%;
      display: none;
      padding-left: 0;
      text-align: right;
      position: relative;
      padding: $padding/3 $padding/1.5;
      color: $subtitle-color;
      font-size: $subtitle-size;
      word-wrap: break-word;

      &::before {
        content: '';
        position: absolute;
        display: block;
        top: 0;
        height: 100%;
        width: 1px;
        background: #DDD;
        right: 0;
      }

      .algolia-docsearch-suggestion__secondary & {
        display: block !important;
      }
    }

    &--subcategory-inline {
      display: none;
    }

    &--title {
      margin-bottom: $padding/4;
      color: $title-color;
      font-size: $title-size;
      font-weight: bold;
    }

    &--text {
      display: desc($include-desc);
      line-height: 1.2em;
      font-size: $text-size;
      color: $text-color;
    }

    &--no-results {
      width: 100%;
      padding: $padding/2 0;
      text-align: center;
      font-size: 1.2em;

      &::before {
        display: none;
      }
    }

    code {
      padding: 1px 5px;
      font-size: 90%;
      border: 0;
      color: #222222;
      background-color: #EBEBEB;
      border-radius: 3px;

      .algolia-docsearch-suggestion--highlight {
        background: none;
      }
    }
  }
}
